<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="box">
			<view class="Flex">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>学生姓名</text>
				</view>
				<input type="text" placeholder="填写学生姓名"
					placeholder-style="font-weight: 400;font-size: 24rpx;color: #BEBDC6;" v-model="req.user_name" />
			</view>
			<!-- <view class="Flex">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>试听课日期</text>
				</view>
				<input type="text" placeholder="填写日期"
					placeholder-style="font-weight: 400;font-size: 24rpx;color: #BEBDC6;" />
			</view> -->
			<view class="Flex">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>上课老师</text>
				</view>
				<input type="text" placeholder="填写上课老师姓名"
					placeholder-style="font-weight: 400;font-size: 24rpx;color: #BEBDC6;" v-model="req.teacher_name" />
			</view>
			<view class="Flex" style="border: none;display: inline-block;">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>学生当前测评等级</text>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in topics" :key="index">
						<view>
							<radio :value="item.name" :checked="index === current" style="transform:scale(0.8);" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="Flex" style="display: block">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>预估达到下一等级所需课程节数</text>
				</view>
				<input type="number" placeholder="根据教学经验填写大致节数"
					placeholder-style="font-weight: 400;font-size: 24rpx;color: #BEBDC6;text-align: left;" style="margin-top:20rpx;
					padding-left:30rpx;" v-model="req.attend_num" />
			</view>
			<view class="Flex">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>发音问题</text>
				</view>
				<input type="text" placeholder="填写发音问题"
					placeholder-style="font-weight: 400;font-size: 24rpx;color: #BEBDC6;"
					v-model="req.pronunciation_issues" />
			</view>
			<view class="Flex" style="display: block">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>吐字不清晰的词语</text>
				</view>
				<input type="text" placeholder="请列出学生在试听课中发音不清晰的词语"
					placeholder-style="font-weight: 400;font-size: 24rpx;color: #BEBDC6;text-align: left;" style="margin-top:20rpx;
					padding-left:30rpx;" v-model="req.unclear_words" />
			</view>
			<view class="Flex" style="display: block">
				<view class="View">
					<view :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>老师评语</text>
				</view>
				<textarea placeholder="请在此处填写老师对学生表现的评语，如学习" placeholder-style="font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #BEBDC6;" v-model="req.teacher_comment"></textarea>
			</view>
			<view class="Flex" style="display: block;border:none;">
				<view class="View">
					<text>备注:</text>
				</view>
				<text class="bz">本反馈表基于欧洲语言共同参考框架（CEF</text>
			</view>
			<button :style="{'background':$store.state.buttonColor}" @click="setAuditionFeedback">提交</button>
		</view>
	</view>
</template>
<script>
	import {
		setAuditionFeedback
	} from '../../api/Mine.js';
	export default {
		data() {
			return {
				current: null,
				topics: [{
					name: 'A1:入门级别，能够理解并使用非常基础的日常表达，进行简单的交流。',
				}, {
					name: '基础级别，能够处理日常生活中的基本场景，如购物，问路等。',
				}, {
					name: 'B1:基础级别，能够处理日常生活中的基本场景，中的大多数交流需求。',
				}, {
					name: 'B2:中高级水平，能够理解和表达复杂的思想，进行流畅的交流。',
				}, {
					name: 'C1:高级水平，能够理解和使用复杂的语言，进行专业领域的交流。',
				}, {
					name: 'C2:精通水平，接近于以该语言为母语的水平，能够流畅地进行各种语言活动。',
				}],
				req: {
					user_name: '', //学生姓名
					teacher_name: '', //老师姓名
					level: '', //等级
					attend_num: '', //大致节数
					pronunciation_issues: '', //发音问题
					unclear_words: '', //不清楚词语
					teacher_comment: '', //老师评论
					shop_id: uni.getStorageSync('shop_id') || 1, //门店id
				}
			}
		},
		methods: {
			radioChange(e) {
				this.req = {
					...this.req,
					...{
						level: e.detail.value
					}
				};
			},
			/** 
			@method 试听课反馈
			**/
			async setAuditionFeedback() {
				try {
					uni.showLoading({
						title: '正在提交中...'
					});
					const res = await setAuditionFeedback(this.req);
					if (res.code == 1 || res.code == '1') {
						uni.showToast({
							title: '提交成功！',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.hideLoading();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 50rpx;
		padding-top: 50rpx;

		.uni-list-cell {
			display: flex;
			align-items: center;
			margin-top: 35rpx;
		}

		.box {
			width: 85%;
			height: auto;
			margin: 0px auto;
			padding: 10rpx 30rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.Flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #E8E8E8;
				padding-bottom: 20rpx;
				margin-top: 30rpx;

				textarea {
					width: auto;
					height: 192rpx;
					background: #F3F4F6;
					border-radius: 16rpx;
					padding: 20rpx;
					margin-top: 20rpx;
				}

				.bz {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-left: 20rpx;
				}

				.View {
					display: flex;
					align-items: center;

					view {
						width: 18rpx;
						height: 18rpx;
						background: rgba(2, 156, 254, 0.52);
						border-radius: 50%;
					}

					text {
						margin-left: 15rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}
				}

				input {
					text-align: right;
				}
			}
		}

		button {
			width: 50%;
			margin: 0px auto;
			border-radius: 50rpx;
			height: 70rpx;
			color: #fff;
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fe8810;
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
	}
</style>